<template>
  <c-main-template :isBreadcrumb="false" v-loading="loading">
    <div class="user">
      <!-- <div class="user-head">
        <img src="@/assets/img/head2.png" />
        <div class="user-head_upload">上传</div>
      </div> -->
      <c-avatar v-model="ruleForm.avatar" />
      <div>
        <div class="user-title">欢迎登录海囤客汽车出口平台</div>
        <div class="user-member">
          <div class="user-member_img">
            <img src="@/assets/img/member_grey.png" />
          </div>
          <div class="user-member_title">暂无会员</div>
        </div>
      </div>
    </div>
    <div class="user-form">
      <el-form
        label-width="auto"
        label-position="top"
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
      >
        <el-form-item label="用户名" prop="nickname">
          <el-input
            placeholder="请输入用户名"
            size="large"
            v-model="ruleForm.nickname"
          />
        </el-form-item>
        <el-form-item label="联系电话" prop="mobile">
          <el-input
            placeholder="请输入联系电话"
            size="large"
            v-model="ruleForm.mobile"
          />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input
            placeholder="请输入邮箱"
            size="large"
            v-model="ruleForm.email"
          />
        </el-form-item>
        <el-form-item label="公司地址" prop="companyAddress">
          <el-input
            placeholder="请输入公司地址"
            size="large"
            :autosize="{ minRows: 4, maxRows: 5 }"
            type="textarea"
            v-model="ruleForm.companyAddress"
          />
        </el-form-item>
        <div class="mt-50">
          <el-button
            :loading="buttonLoading"
            size="large"
            type="primary"
            @click="handleSubmt"
            >保存资料</el-button
          >
        </div>
      </el-form>
    </div>
  </c-main-template>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import cAvatar from "@/components/Upload/Avatar.vue";
import { deepClone } from "@/utils/index.js";
import { useRouter } from "vue-router";
import { setLocalStorage, clearLoginInfo } from "@/utils/cache.js";
import { ElMessage } from "element-plus";
const router = useRouter();
const { proxy } = getCurrentInstance();
const ruleFormRef = ref();
const ruleForm = ref({});
const rules = ref({});
const loading = ref(false);
const buttonLoading = ref(false);
onMounted(() => {
  getUserInfo();
});
const getUserInfo = () => {
  loading.value = true;
  proxy.$get({ url: "/seller/detail" }).then((user) => {
    ruleForm.value = user;
    setLocalStorage("USER_INFO", user);
    loading.value = false;
  });
};
const handleSubmt = () => {
  buttonLoading.value = true;
  const data = deepClone(ruleForm.value);
  proxy.$post({ url: "/seller/modify", data }).then((res) => {
    buttonLoading.value = false;
    ElMessage.success("个人信息修改成功,请重新登陆！");
    clearLoginInfo();
    router.push("/");
  });
};
</script>
<style lang="less" scoped>
.user {
  display: flex;
  align-items: center;
  margin-top: 60px;
  margin-left: 70px;

  .user-title {
    font-size: 16px;
    font-weight: 400;
    color: #26282a;
    margin-bottom: 8px;
  }
  .user-member {
    width: 84px;
    height: 24px;
    background: url("@/assets/img/not-member-bg.png") no-repeat;
    background-size: 100% 100%;
    display: flex;

    align-items: center;
    .user-member_img {
      width: 16px;
      height: 16px;
      margin-left: 8px;
    }
    .user-member_title {
      margin-left: 4px;
      font-size: 12px;
      color: #ffe7ca;
    }
  }
}
.user-form {
  width: 360px;
  margin-top: 40px;
  margin-left: 70px;
}
</style>